﻿
<div id="test">
    <div>
        <h3>员工信息展示</h3>
        <div style="float:left">
            <input type="text" style="width:230px" class="form-control" v-model="user" placeholder="请输入名称" />
        </div><button type="button" class="btn btn-secondary" v-on:click="queryUser">查询</button>
        <div class="btn-group" style="float:right;">
            <button type="button" class="btn btn-secondary" onclick="location.href='/Personnel/Addsf'">新增员工</button>
            <button type="button" class="btn btn-secondary" onclick="location.href='/Personnel/Departments'">部门管理</button>
            <button type="button" class="btn btn-secondary" onclick="location.href='/Personnel/Positions'">职位管理</button>
        </div>
        <br />
    </div>





    <table class="table table-hover">
        <tr style="background-color:cadetblue">
            <td></td>
            <td>编号</td>
            <td>姓名</td>
            <td>性别</td>
            <td>年龄</td>
            <td>部门</td>
            <td>职位</td>
            <td>备注</td>
            <td>操作</td>
        </tr>
        <tr v-for="(item,index) in data">
            <td>{{index+1}}</td>
            <td>{{item.sSerial}}</td>
            <td>{{item.sName}}</td>
            <td>{{item.sSex}}</td>
            <td>{{item.sAge}}</td>
            <td>{{item.department}}</td>
            <td>{{item.position}}</td>
            <td>{{item.sRemark}}</td>
            <td>
                <input type="button" v-on:click="Del(item.sTaffID)" value="删除" />
            </td>
        </tr>
    </table>

</div>
<script src="~/js/qs.min.js"></script>
<script src="~/js/axios.min.js"></script>
<script src="~/js/site.js"></script>
<script>


    new Vue({
        el: '#test',
        data() {
            return {
                data: {},
                id: 0,
                user:""
            }
        },
        mounted() {//首次加载事件

            axios
                .get('/Personnel/GetStaffs')
                .then(res => (this.data = res.data))
                .catch(function (error) {
                    console.log(error);
                })

        },
        methods: {
            //查询的方法
            queryUser: function () {
                axios
                    .get('/Personnel/GetStaffs'),
                    {
                    params: this.user
                    }
                    
                    .then(res => (this.users = res.data));
            },
            Del: function (hid) {
                this.id = hid;
                axios
                    .get("/Personnel/DelSt", {
                        params: {
                            id: this.id
                        }
                    })
                    .then(
                        function (i) {
                            if (i.data > 0) {
                                alert("删除成功！");
                                location.href = '/Personnel/HomeIndex'
                            }
                            else {
                                alert("删除失败");
                            }
                        }
                    );

            }
        }
    })

</script>